<template>
  <a-modal
      title="角色授权"
      :width="800"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
      @ok="handleOk"
  >
    <a-table
        :columns="columns"
        rowKey="id"
        :pagination="false"
        :data-source="data"
        :row-selection="rowSelection"
        size="middle" >
      <template v-slot:action="{record, text}">
              <a-checkbox v-for="item in (record.actionEntitySet || [])" v-model:checked="item.isCheck" :key="item.id">
                {{item.describe}}
              </a-checkbox>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue'
import {Modal, Table, Checkbox} from 'ant-design-vue'
import {addSchema} from "./add-schema"
import {useAsync} from "@/hooks"
import DynamicForm from '@/components/dynamic-form/dynamic-form.vue'
import {roleUpdate} from "@/api/role/roles"
import {permissionGetPerbyId} from "@/api/role/permission"
const columns = [
  {
    title: '权限名称',
    dataIndex: 'permissionName',
  },
  {
    title: '标识',
    dataIndex: 'permissionId',
  },
  {
    title: '配置',
    dataIndex: 'action',
    slots: {customRender: 'action'}
  }
]

export default defineComponent({
  name: "auth-modal",
  components: { [Modal.name]: Modal, DynamicForm, [Table.name]: Table, [Checkbox.name]: Checkbox},
  props: {
    remove: { // 移除模态框
      type: Function
    },
    fields: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  async setup(props) {
    const dynamicForm = ref<any>(null)

    const state = reactive({
      visible: true,
      confirmLoading: false,
      data: [],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          state.rowSelection.selectedRowKeys = selectedRowKeys
        },
        selectedRowKeys: [1, 7]
      },
      dynamicValidateForm: addSchema
    })

    fetch('/permissionTree.json').then(res => res.json()).then(res => {
      //console.log(res, '权限树')
      state.data = res
    })

    const handleOk = () => {
      console.log(state.data)
    }

    return {
      ...toRefs(state),
      handleOk,
      columns,
      dynamicForm,
    }
  }
})
</script>

<style scoped>
</style>
